<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公交</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <script src="//unpkg.com/vue@3"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
    <!-- import JavaScript -->
    <script src="//cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="//cdn.bootcdn.net/ajax/libs/js-sha256/0.10.1/sha256.js"></script>
    <script src="//unpkg.com/element-plus"></script>
</head>
<body>
<div id="app">
    <el-card>
        <template #header>
            <div class="card-header">
                <span>数据刷新时间：{{refreshTimeStr}}</span>
            </div>
        </template>
        <el-tabs v-model="currentLineLocalCode" class="demo-tabs" @tab-change="changeLine">
            <el-tab-pane :label="line.name" :name="line.code" v-for="line in lineList"
                         :key="line.code"></el-tab-pane>
        </el-tabs>
        <el-table :data="stationList">
            <el-table-column prop="name" label="前往 ➡️️" width="130px">
                <template #default="scope">
                    <span :style="{color: isImportantStation(scope.row.name)? 'red': null}">{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column>
                <template #header>
                    <el-radio-group v-model="currentSegmentId" size="small" @change="changeSegment">
                        <el-radio-button :value="segment.id" :label="segment.name" v-for="segment in segmentList"
                                         :key="segment.id"/>
                    </el-radio-group>
                </template>
                <template #default="scope">
                    <span>{{getStationCarDesc(scope.row.id)}}</span>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</div>
<script src="index.js?v=2411081200"></script>
</body>
</html>
